(() => {
  /*
		todomvc:
			* 数据列表渲染 ok
			* 添加任务 ok
			* 删除任务 ok
			* 全选反选任务 ok
			* 清空选中的多条任务 ok
			* 编辑任务 ok
			* 切换类型：未完成/已完成/所有 ok
			* 统计未完成条数 ok
			* 数据持久化(本地存储)
	*/

  let key = "mytodo";
  let storage = {
    get() {
      //获取本地存储
      let str = localStorage.getItem(key);
      if (str) {
        return JSON.parse(str);
      } else {
        return [];
      }
    },
    set(data) {
      //设置本地存储
      localStorage.setItem(key, JSON.stringify(data));
    },
  };

  //   let arr1 = [
  //     {
  //       title: "今天完成todomvc",
  //       completed: false,
  //     },
  //     {
  //       title: "今天复习所有指令",
  //       completed: true,
  //     },
  //     {
  //       title: "总结vue知识点",
  //       completed: false,
  //     },
  //   ];
  //   storage.set(arr1);
  //   let arr2 = storage.get();
  //   console.log(arr2);

  let vm = new Vue({
    el: "#app",

    //数据
    data: {
      //已存在的任务列表
      taskList: storage.get(),
      text: "", //要添加的任务
      currenIndex: null,
      hash: "",
    },

    methods: {
      //功能：回车的时候，添加一个新任务
      addTask() {
        console.log(this.text);
        let obj = {
          title: this.text,
          completed: false,
        };
        this.taskList.push(obj); //新增数据，新数据放在最后插入
        this.text = "";
      },

      //功能：点击x的时候，删除当前任务
      delTask(index) {
        console.log(index);
        let isok = confirm("您不要我了吗?"); //确定取消框
        if (isok) {
          this.taskList.splice(index, 1); //参数一：起始下标；参数二：删除的条数
        }
      },

      //功能：删除多条已完成的任务
      delAll() {
        let isok = confirm("您确定要删除全部已完成的吗?"); //确定取消框
        if (isok) {
          this.taskList = this.taskList.filter(
            (item) => item.completed == false
          ); //留下未完成的任务，返回的是数组
        }
      },

      //功能：回车提交修改的数据
      editTask(index) {
        if (!this.taskList[index].title) {
          //如果里面已经没有内容，就删除该项任务
          this.taskList.splice(index, 1);
        }
        this.currenIndex = null; //隐藏编辑表单
      },

      //功能：统计未完成的条数
      total() {
        let arr = this.taskList.filter((item) => item.completed == false);
        return arr.length;
      },
    },

    computed: {
      allcheck: {
        get() {
          //get方法
          return this.taskList.every((item) => item.completed == true); //返回的是布尔值
        },
        set(val) {
          console.log(val, "全选");
          this.taskList.forEach((item) => {
            item.completed = val;
          });
        },
      },

      filter() {
        //过滤数据的计算属性
        let arr = [];
        if (this.hash == "active") {
          //过滤未完成的数据
          arr = this.taskList.filter((item) => item.completed == false);
        } else if (this.hash == "completed") {
          //过滤已完成的数据
          arr = this.taskList.filter((item) => item.completed == true);
        } else {
          //所有数据
          arr = this.taskList;
        }
        return arr;
      },
    },

    watch: {
      taskList: {
        //监听如果数据有变化就存到本地存储
        deep: true,
        handler(newval) {
          storage.set(newval);
        },
      },
    },

    //局部注册指令  v-foucs
    directives: {
      focus: {
        //指令不需要加 v-  但是使用的时候记得加 v-
        inserted(el, binding) {
          // el是当前指令作用的那个Dom元素，
          // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
          // console.log(el, binding);
          el.focus(); //聚焦的兼容处理
        },
      },

      focus2: {
        //用在双击出现的编辑表单里面
        update(el) {
          // console.log(el);
          el.focus();
        },
      },
    },
  });

  //获取哈希值 hash
  window.onhashchange = function () {
    //哈希值有变化的时候会触发
    let hash = location.hash.slice(2);
    console.log(hash, "哈希");
    vm.hash = hash; //直接把hash挂在vm实例上
  };

  window.onhashchange(); //进入页面就获取哈希值

  //   vm.aa = "测试一下";
  //   console.log(vm);
})();
